<template>
  <div style="width: 100%; height: 100%; min-height: 300px" />
</template>
<script>
import { getBarChart } from "@/api/hades/homepage/homepage";
//import Util from '@/utils/activiti/myUtil'
// 引入基本模板
var echarts = require("echarts");
// 引入柱状图组件
require("echarts/lib/chart/bar");
require("echarts/lib/chart/pie");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
export default {
  props: {
    width: {
      type: Number,
      default: 0,
    },
    year: {
      type: String,
      default: "",
    },
    resId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      chart: null,
      xAxisData: [],
      lxData: [],
      ldData: [],
      lfData: [],
    };
  },
  watch: {
    width: function (val, oldVar) {
      this.refreshChart();
    },
    year: function (val, oldVar) {
      this.initChartData();
    },
  },
  created() {
    this.initChartData();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    refreshChart() {
      this.$nextTick(() => {
        if (this.chart) {
          this.chart.dispose();
        }
        this.chart = null;
        this.initChart();
      });
    },
    initChartData() {
      //    var startMonth,endMonth;
      //    var curYear = '2024';
      //    var months = [];
      //    if(curYear === this.year)
      //    {
      //      endMonth = Number(Util.formatDate(new Date(),'yyyyMM'));
      //    }else{
      //      endMonth = Number(this.year + "" + "12");
      //    }
      //    var b = 0;
      //    for(var i = 0;i < 12;i++)
      //    {
      //      if((endMonth - i) >= Number(this.year + "" +"01"))
      //      {
      //        months.push((endMonth - i) + "");
      //        if(!((endMonth - i) > Number(this.year + "" +"01")))
      //        {
      //          b = i;
      //        }
      //      }else{
      //        months.push((Number((Number(this.year) - 1) + "" +"12") - (i-b-1)) + '');
      //      }
      //    }
      //    console.log('months>>',months)
      //    console.log('this.year>>',this.year)
      //    this.xAxisData = months;
      //    months.forEach((m,mIndex) => {
      //        if(mIndex < 11 && m === (this.year + "" +"01"))
      //        {
      //          this.xAxisData.push(Util.formatDate(Util.parseDate((Number(m)+1)+'','yyyyMM'),'yyyy年MM月'))
      //        }else{
      //          this.xAxisData.push(Util.formatDate(Util.parseDate((Number(m)+1)+'','yyyyMM'),'MM月'))
      //        }
      //    })
      //    Util.appPost('/api/expenditure/amountByServiceModuleMonth', { financeChargePerson:this.financeChargePerson,startMonth:months[11],endMonth:months[0] }).then((res) => {
      //      this.xAxisData = [];
      //      this.xmData = [];
      //      this.gsData = [];
      //      var gsValue= 0 ;
      //      var xmValue = 0;
      //      months.forEach((m,mIndex) => {
      //        if(mIndex < 11 && m === (this.year + "" +"01"))
      //        {
      //          this.xAxisData.push(Util.formatDate(Util.parseDate((Number(m)+1)+'','yyyyMM'),'yyyy年MM月'))
      //        }else{
      //          this.xAxisData.push(Util.formatDate(Util.parseDate((Number(m)+1)+'','yyyyMM'),'MM月'))
      //        }
      //        gsValue= 0.00 ;
      //        xmValue = 0.00;
      //        for(var i = 0;i < res.length;i++)
      //        {
      //          if(res[i].pay_month === m)
      //          {
      //            gsValue = res[i].gs_amount.toFixed(2);
      //            xmValue = res[i].xm_amount.toFixed(2);
      //            break;
      //          }
      //        }
      //        this.xmData.push(xmValue);
      //        this.gsData.push(gsValue);
      //      })
      this.xAxisData = ["8月", "9月", "10月", "11月", "12月", "2024年01月", "02月", "03月", "04月", "05月", "06月", "07月"];
      this.lxData = [6, 1, 3, 5, 2, 8, 5, 3, 3, 2, 6, 7];
      this.ldData = [10, 35, 29, 40, 80, 20, 40, 55, 30, 21, 18, 40];
      this.lfData = [13, 25, 39, 20, 30, 10, 18, 24, 19, 6, 9, 12];
      this.$nextTick(() => {
        this.initChart();
      });
      //    })
    },

    initChart() {
      let params = {
        type: 2,
      };
      getBarChart(params).then((response) => {
        let source = [
          {
            分类: "物业类",
            来信事项登记: 15,
            来电事项登记: 32,
            来访事项登记: 11,
            省信访局厅本级信访件: 8,
            省信访局各地市信访件: 35,
          },
          {
            分类: "建管类",
            来信事项登记: 3,
            来电事项登记: 30,
            来访事项登记: 2,
            省信访局厅本级信访件: 6,
            省信访局各地市信访件: 27,
          },
          {
            分类: "消防类",
            来信事项登记: 33,
            来电事项登记: 22,
            来访事项登记: 12,
            省信访局厅本级信访件: 42,
            省信访局各地市信访件: 8,
          },
          {
            分类: "质安类",
            来信事项登记: 3,
            来电事项登记: 87,
            来访事项登记: 5,
            省信访局厅本级信访件: 2,
            省信访局各地市信访件: 81,
          },
          {
            分类: "市政类处",
            来信事项登记: 12,
            来电事项登记: 30,
            来访事项登记: 31,
            省信访局厅本级信访件: 5,
            省信访局各地市信访件: 78,
          },
          {
            分类: "城市管理",
            来信事项登记: 54,
            来电事项登记: 87,
            来访事项登记: 33,
            省信访局厅本级信访件: 88,
            省信访局各地市信访件: 70,
          },
          {
            分类: "房产类",
            来信事项登记: 20,
            来电事项登记: 30,
            来访事项登记: 11,
            省信访局厅本级信访件: 15,
            省信访局各地市信访件: 8,
          },
          {
            分类: "乡村建设类",
            来信事项登记: 12,
            来电事项登记: 34,
            来访事项登记: 62,
            省信访局厅本级信访件: 21,
            省信访局各地市信访件: 12,
          },
          {
            分类: "其他类",
            来信事项登记: 23,
            来电事项登记: 86,
            来访事项登记: 63,
            省信访局厅本级信访件: 17,
            省信访局各地市信访件: 42,
          },
        ];
        // let source = response.data;
        let dataset = {
          dimensions: ["分类", "来信事项登记", "来电事项登记", "来访事项登记", "省信访局厅本级信访件", "省信访局各地市信访件"],
          // dimensions: [
          //   { name: "categoryName", displayName: "分类" },
          //   { name: "letter", displayName: "来信事项登记" },
          //   { name: "telegram", displayName: "来电事项登记" },
          //   { name: "visit", displayName: "来访事项登记" },
          //   { name: "province", displayName: "省信访局厅本级信访件" },
          //   { name: "city", displayName: "省信访局各地市信访件" },
          // ],
          source,
        };

        let color = [
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#F0A50C", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#F0A40B", // 100% 处的颜色
              },
            ],
          },
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#00C5FF", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#00C5FF", // 100% 处的颜色
              },
            ],
          },
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#66C236", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#65C134", // 100% 处的颜色
              },
            ],
          },
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#6AE9CF", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#37C1A5", // 100% 处的颜色
              },
            ],
          },
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#458CE9", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#2E85FF", // 100% 处的颜色
              },
            ],
          },
        ];

        // 基于准备好的dom，初始化echarts实例
        this.chart = echarts.init(this.$el, "letterbytype"); //echarts.init(document.getElementById('myChart'))
        // 绘制图表
        this.chart.setOption({
          dataset,
          color,
          tooltip: {
            trigger: "axis",
          },
          legend: {
            right: "5%",
            top: "0%",
          },
          grid: {
            left: "5%", //图表距边框的距离
            right: "5%",
            top: "12%",
            bottom: "15%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            axisLabel: {
              color: "#000000",
              //              fontWeight: "bold"
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#000000",
                width: "1",
                type: "solid",
              },
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: "#000000",
              },
            },
          },
          yAxis: {
            type: "value",
            axisTick: {
              show: true,
            },
            axisLine: {
              show: true,
            },
            axisLabel: {
              show: true,
              color: "#000000",
            },
          },
          series: [
            {
              type: "bar",
              barWidth: "8%",
            },
            {
              type: "bar",
              barWidth: "8%",
            },
            {
              type: "bar",
              barWidth: "8%",
            },
            {
              type: "bar",
              barWidth: "8%",
            },
            {
              type: "bar",
              barWidth: "8%",
            },
          ],
        });
      });
    },
  },
};
</script>
<style></style>
